<template>
  <div>
    <div class="lineselect">
      <el-card>
        <span>一级分类:</span>
        <el-select
          style="width: 267px; margin: 0px 10px"
          v-model="yj"
          @change="xg"
        >
          <el-option
            v-for="(item, index) in yjfllist"
            :key="index"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <span>二级分类:</span>
        <el-select
          style="width: 267px; margin: 0px 10px"
          v-model="ej"
          @change="xg1"
        >
          <el-option
            v-for="(item, index) in ejfllist"
            :key="index"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <span>三级分类:</span>
        <el-select
          style="width: 267px; margin: 0px 10px"
          v-model="sj"
          @change="xg2"
        >
          <el-option
            v-for="(item, index) in sjflist"
            :key="index"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-card>
    </div>
    <el-card v-show="xianshi">
      <el-button type="primary" @click="tjsx">添加属性</el-button>
      <el-table border :data="tabledata">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="attrName" label="属性名称" />
        <el-table-column prop="address" label="属性值名称">
          <template v-slot="scope">
            <el-tag
              style="margin-right: 10px"
              v-for="(item, index) in scope.row.attrValueList"
              :key="index"
            >
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="bianji1(scope.row)"
              >编辑</el-button
            >
            <el-button type="primary" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card v-show="!xianshi">
      <div style="margin-bottom: 10px">
        <el-input
          placeholder="请输入属性名称"
          v-model="attrName"
          style="width: 200px"
        ></el-input>
      </div>
      <el-button type="primary" @click="tjsxz">添加属性值</el-button>

      <el-table :data="sxdata">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="valueName" label="属性值名称">
          <template v-slot="scope">
            <el-input
              placeholder="请输入"
              v-model="scope.row.valueName"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="shanchu1(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="save1">取消</el-button>
    </el-card>
  </div>
</template>
<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import instance from "../assets/axiosinstance";
const yjfllist = ref([]);
const id = ref("");
const ejfllist = ref([]);
const sjflist = ref([]);
const attrName = ref("");
const sxdata = ref([]);
const yj = ref("");
const ej = ref("");
const xianshi = ref(true);
const sj = ref("");
const tjsxz = () => {
  sxdata.value.push({
    valueName: "",
    flag: false,
  });
};
const remove=(e)=>{
console.log(e)
 ElMessageBox.confirm("是否确认删除该条数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      const res = await instance.delete(`/admin/product/deleteAttr/${e.id}`);
      console.log(res);
      if (res.code == 200) {
         gettable()
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
   
}
const bianji1 = (e) => {
  console.log(e);
  id.value = e.id;
  xianshi.value = false;
  attrName.value = e.attrName;
  sxdata.value=[];
  e.attrValueList.forEach((el) => {
    sxdata.value.push({
      valueName: el.valueName,
      flag: false,
    });
  });
};
const shanchu1 = (e) => {
  console.log(e);

  sxdata.value.splice(e.$index, 1);
};
const save1 = () => {
  xianshi.value = true;
};
const tabledata = ref([]);
const save = async () => {
  console.log(yj.value);
  if (yj.value !== "" || ej.value !== "" || sj.value !== "") {
    if (id.value == "") {
      const res = await instance.post("/admin/product/saveAttrInfo", {
        attrName: attrName.value,
        attrValueList: sxdata.value,
        categoryId: sj.value,
        categoryLevel: 3,
      });
    } else {
      const res = await instance.post("/admin/product/saveAttrInfo", {
        attrName: attrName.value,
        attrValueList: sxdata.value,
        categoryId: sj.value,
        categoryLevel: 3,
        id: id.value,
      });
    }

    xianshi.value = true;
    gettable();
  } else {
    ElMessage({
      message: "请选择分类",
      type: "warning",
      duration: 3 * 1000,
    });
  }
};
const xg2 = (e) => {
  console.log(e);
  sj.value = e;
  gettable();
};
const tjsx = () => {
  attrName.value = "";
  sxdata.value = [];
  xianshi.value = false;
};
const xg = (e) => {
  console.log(e);
  yj.value = e;
  getejfl();
};
const xg1 = (e) => {
  ej.value = e;
  getsjfl();
};
const gettable = async () => {
  const res = await instance.get(
    `/admin/product/attrInfoList/${yj.value}/${ej.value}/${sj.value}`
  );
  console.log(res);
  tabledata.value = res.data;
};
const getsjfl = async () => {
  const res = await instance.get(`admin/product/getCategory3/${ej.value}`);
  console.log(res);
  sjflist.value = res.data;
};
const getejfl = async () => {
  const res = await instance.get(`/admin/product/getCategory2/${yj.value}`);
  console.log(res);
  ejfllist.value = res.data;
};

const getyjfl = async () => {
  const res = await instance.get("admin/product/getCategory1");
  console.log(res);
  yjfllist.value = res.data;
};
onMounted(() => {
  getyjfl();
});
</script>
<style scoped>
.lineselect {
  margin-bottom: 15px;
}
</style>